<template>
	<!-- 试卷笔记 -->
	<view class="cs-test">
		<view :class="{'bg-active': isOpenSid || isOpenTopic || isOpenDate}" @click="hideSelect"></view>
		
		<view class="cs-test-tabs-x">
			<!-- 类型标题选择 -->
			<view class="cs-test-tabs">
				<view :class="['cs-test-tabs-item', (index === title_index && (isOpenSid || isOpenTopic || isOpenDate)) ? 'item-active' : '']" 
				v-for="(item,index) in titleType" :key='index' @click="changeType(index)">
					{{item.title}}<text :class="['iconfont icon_open icon_open-active', item.icon]"></text>
				</view>
			</view>
			
			<!-- 科目列表 -->
			<view class="cs-test-select" v-if="title_index === 0 && isOpenSid">
				<view :class="['cs-test-select-li',index === sid_index ? 'li-active' : '']" 
				v-for="(item,index) in sid_list" :key='index' @click="selectSid(index)">
					<view class="li-ft32"><text>{{item.subject_name}}</text></view>
					<view class="li-icon" v-show="index === sid_index"><text class="iconfont iconqueding icon_queding"></text></view>
				</view>
			</view>
			
			<!-- 题目题型列表 -->
			<view class="cs-test-select" v-if="title_index === 1 && isOpenTopic">
				<view :class="['cs-test-select-li',index === topic_index ? 'li-active' : '']" 
				v-for="(item,index) in topicType" :key='index' @click="selectTopic(index)">
					<view class="li-ft32"><text>{{item.title}}</text></view>
					<view class="li-icon" v-show="index === topic_index"><text class="iconfont iconqueding icon_queding"></text></view>
				</view>
			</view>
			
			<!-- 时间选择 -->
			<view class="cs-test-picker" v-if="title_index === 2 && isOpenDate">
				<picker-view class="picker-x" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="changeDate">
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
				<view class="picker-opear">
					<view class="picker-opear-reset" @click="resetDate">重置</view>
					<view class="picker-opear-reset" @click="todayDate">今天</view>
					<view class="picker-opear-confirm" @click="confirmDate">完成</view>
				</view>
			</view>
		</view>
		
		<!-- 数据列表 -->
		<view class="cs-test-ul">
			<view class="cs-test-tip" v-if="noteType == 1">长按可以删除笔记</view>
			<view :class="['cs-test-ul-li', item.isOpen ? 'test-li-active' : '']" v-for="(item, index) in data_list" :key='index' @click="linkNoteDetail(item)" @longpress='longtapDelte(index)'>
				<view class="li-tc" v-html="item.Cont.question_title"></view>
				<view class="li-sid">
					<view style="color: #999999;font-size:24upx;"><text class="li-sid-bf">{{item.Cont.subject_name}}</text><text>{{item.Cont.question_type_name}}</text></view>
					<view style="color: #C2C2C2;font-size:24upx;">{{item.Time}}</view>
				</view>
			</view>
			<uni-load-more v-if="data_list.length >= 10" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data_list: Array, // 存储试卷/试题笔记列表，当切换选项卡就会根据哪个选项卡来拿到不同的数据
			sid_list: Array,
			type: String, // 区分是试卷还是试题
			topicType: Array,
			status: String,
			contentText: Object
		},
		data() {
			// 存储时间 年 月 日	
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {years.push(i)}
			for (let i = 1; i <= 12; i++) {	months.push(i)}
			for (let i = 1; i <= 31; i++) {days.push(i)}
			
			return {
				titleType: [
					{title: '全部科目',icon: 'iconxiala'},
					{title: '全部题型',icon: 'iconxiala'},
					{title: '选择时间',icon: 'iconxiala'}
				],
				title_index: 0, // 切换索引 0 全部科目   1 全部题型  2 选择时间

				sid_index: 0, // 选择索引
				isOpenSid: false, // 打开下拉的开关,

				topic_index: 0, // 选择索引
				isOpenTopic: false, // 打开下拉的开关,
				
				// 时间
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				isOpenDate: false , // 打开下拉的开关
				progress: 0,
				noteType: uni.getStorageSync('noteType'), //1家长 2孩子 
			}
		},
		methods: {
			// 切换标题
			changeType(title_index) {
				this.title_index = title_index
				// 根据不同的切换标题状态 来改变开关
				switch (this.title_index) {
					case 0:
						this.isOpenSid = !this.isOpenSid
						// 当显示科目时，要把其他状态给关了,这样其他状态下次点击进行了反转就是true也就能显示了
						this.isOpenTopic = false
						this.isOpenDate = false
						break;
					case 1:
						this.isOpenTopic = !this.isOpenTopic
						this.isOpenSid = false
						this.isOpenDate = false
						break;
					case 2:
						this.isOpenDate = !this.isOpenDate
						this.isOpenSid = false
						this.isOpenTopic = false
						// this.value = [this.timeArr[0], this.timeArr[1], this.timeArr[2]]
						break;
				}
			},
			
			// 选择科目
			selectSid(index) {
				this.sid_index = index // 获取当前选择的索引
				this.titleType[this.title_index].title = this.sid_list[index].subject_name // 获取选中的科目作为标题
				
				let sid = this.sid_list[index].sid 
				 this.$emit('selectSid', sid)// 将科目ID 传递给父组件
				// 取消弹窗
				this.hideSelect()
			},
			
			// 选择题型
			selectTopic(index) {
				this.topic_index = index // 获取当前选择的索引
				this.titleType[this.title_index].title = this.topicType[index].title // 获取选中的题目类型作为标题
				let question_typeId = this.topicType[index].type_id
				this.$emit('selectTopic', question_typeId) // 将题目类型ID 传递给父组件
				// 取消弹窗
				this.hideSelect()
			},
			
			// 监听选择时间
			changeDate(e) {
				// 获取年月份
				let year = parseInt(e.detail.value[0])
				let month = parseInt(e.detail.value[1] + 1)
				let day = parseInt(e.detail.value[2]) + 1 // 这里需要+1天才可以获取当前最新选择的天数
				// 1. 根据月份来判断这个月有多少天
				// 2. 还需要根据闰年还是平年来判断2月份是28 还是 29
				// 3. 然后进行更新数据
				this.days = [] // 每次滑动将原来的天数清空来重新赋值
				let num = 0
				if (month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12) {
					while(num < 31) {num++; this.days.push(num)}
				} else {
					if (month === 2) {
						if ((year % 4 === 0 && year % 100 !== 0) || year % 100 === 0) {
							while(num < 29) {num++; this.days.push(num)}
						} else {
							while(num < 28) {num++; this.days.push(num)}
						}
					} else {
						while(num < 30) {num++; this.days.push(num)}
					}
				}
				this.value = [year, month-1, day-1] // 保存选择的时间记录 避免关闭后重新回归到当天时间
				this.time = `20${year}-${month}-${day}` // 实时更新用户选择的时间
			},
			
			// 重置时间
			resetDate() {
				// 由于是重置，因此不要传递时间过去，默认拿所有
				this.$emit('changeDate', '') 
				this.hideSelect()
			},
			
			// 今天
			todayDate() {
				// 重置时也要更新到当前时间
				this.value = [9999, this.month - 1, this.day - 1] // 该数组可以重置到今天
				let year = parseInt(this.year)
				let month = parseInt(this.month)
				let day = parseInt(this.day)
				this.time = `${year}-${month}-${day}`
				this.$emit('changeDate', this.time)
				this.hideSelect()
			},
 			
			// 完成
			confirmDate() {
				this.$emit('changeDate', this.time) // 将时间传递给父组件
				this.hideSelect()
			},
			
			// 取消弹窗
			hideSelect() {
				this.isOpenSid = false
				this.isOpenTopic = false
				this.isOpenDate = false
			},
			
			// 进入试题详情(笔记)
			linkNoteDetail(item) {
				uni.navigateTo({
					url: `./component/Taskdetail?type=1&id=${item.course_key}&sid=${item.sid}&question_typeid=${item.question_type_id}&unid=${item.unid}&bimg=${item.notes_content}`
				})
			},
			// 长按删除事件
			longtapDelte(index) {
				this.$emit('longtapDelte', index)
			}
 		}
	}
</script>

<style lang="scss" scoped>
	.cs-test {
		overflow: auto;
	}
	.cs-test-tabs-x{
		position: fixed;
		left: 0;right: 0;
		overflow: hidden;
		z-index: 1;
		background: #FFFFFF;
	}
	// 标题
	.cs-test-tabs {
		position: fixed;
		display: flex;
		padding: 40upx 54upx;
		margin-top: 80upx;
		left: 0;
		right: 0;
		height: 60upx;
		align-items: center;
		justify-content: space-between;
		background: #FAFAFA;
	}
	.cs-test-tabs-item {
		font-size: 30upx;
	}

	// 下拉选择
	.cs-test-select {
		height: 550upx;
		margin-top: 212upx;
		overflow: auto;
		background: #FFFFFF;
	}
	.cs-test-select-li {
		display: flex;
		padding: 30upx 42upx;
		justify-content: space-between;
		color: #666666;
		border-top: 2upx solid #E5E5E5;
	}
	.li-ft32 {
		font-size: 32upx;
	}
	
	
	// 时间选择
	.picker-x{
		margin-top: 212upx;
		height: 432upx;
		text-align: center;
	}
	.picker-item{
		line-height: 100upx;
	}
	.picker-opear{
		display: flex;
		padding: 30upx 0;
		justify-content: space-around;
		border-top: 2upx solid #E5E5E5;
		background: #FFFFFF;
	}
	.picker-opear-reset {
		font-size: 32upx;
		color: #999999;
	}
	.picker-opear-confirm {
		font-size: 32upx;
		color: #FF9900;
	}
	.cs-test-tip {
		font-size: 24upx;
		text-align: center;
		color: #999999;
		margin-bottom: 30upx;
	}
	// 数据列表
	.cs-test-ul {
		margin: 226upx 30upx 0 30upx;
	}
	.cs-test-ul-li{
		margin-bottom: 20upx;
		padding: 22upx 20upx;
		border-radius: 8upx;
		background: #FFFFFF;
	}
	.cs-test-ul-li:last-child{
		margin-bottom: 120upx;
	}
	.test-li-active{
		border: 1px solid #FF9900;
	}
	.li-tc{
		color: #333333;
		font-size: 32upx;
	}
	.li-sid{
		display: flex;
		justify-content: space-between;
	}
	.li-sid-bf::after{
		display: inline-block;
		margin: 0 14upx;
		content: '|';
		color: #999999;
	}
	
	// 图标
	.icon_open {
		padding-left: 0 22upx;
		vertical-align: middle;
	}
	.icon_queding {
		font-size: 34upx;
	}

	// 激活样式
	.li-active,
	.item-active {
		color: #FF9900;
	}
	.item-active > .icon_open-active {
		display: inline-block;
		transform: rotate(180deg);
	}
	.bg-active{
		position: fixed;
		left:0;right:0;top:0;bottom:0;
		background: rgba(0,0,0,0.5);
	}
</style>
